/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    useTheme,
} from "customize-easy-ui-component";
import {UserContext} from "../routing/UserContext";
import useLogoutMutation from "../common/useLogoutMutation";
import { useContext, } from "react";
import RoutingContext from "../routing/RoutingContext";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { HeadlinesMainQuery } from "./__generated__/HeadlinesMainQuery.graphql";
import { PipingUnitEsListParent } from "./HeadlinesList";
import {AloneContainer} from "../comp/AloneContainer";
const graphql = require("babel-plugin-relay/macro");    //编译器解析graphql文本代码。


interface Props {
    prepared: {
        myQuery: PreloadedQuery<HeadlinesMainQuery>;
        filter: any     //传递本列表的过滤参数
    }
    children: React.ReactNode;
    id?: string;
    routeData: any;
}

export default function HeadlinesMain(props: Props) {
  const theme = useTheme();
    const {user, setUser} =useContext(UserContext);
    const { isExact }=props.routeData;
    const {history } = useContext(RoutingContext);
  let showingRecipe =history.location.pathname; // params?.recipe;
  let initTab=0;

  const { call:signOut } = useLogoutMutation();
  //const { item:sumofTask,  } = useCountOfTask({dep:"", status:""} );
 // const { item:sumofTask,  } ={item: 3045};
    //必须把下面的挂接片段的参数集中放在这里引入的。参数按照出现顺序排列：参数在3个地方出现。
    //前端必选after参数为空的：也会送到后端再后端抛异常 Object required to be not null; 参数定义了却没用到也会编译报错！
    //【小心阻碍点】下层Fragment嵌入带来的参数也必须在这里定义啊，不能放在下层定义参数，需提前声明参数。一个graphQL请求包只能套一个query,不允许多个query{}存在的！约束啊。
   //这里不能和下层次共同定义一个同名字参数的，编译报错。最后办法：除非后端提供接口能够接受两个参数充当同一个实际参数功能，奇怪！。
   //Relay要求的提前汇聚加载数据的模式只能这样了；需提前定义参数名以及提早赋予参数数值。
    //【特别注意！】下面usePreloadedQuery之后跟随的代码：执行次数比在前面的代码执行次数少！也就是Hook可以更改代码流程，可能提前返回return()给上一级组件了？HeadlinesMain.tsx
  const data = usePreloadedQuery<HeadlinesMainQuery>(
      graphql`
          query HeadlinesMainQuery($where:NewsEsInput, $after:String,$first:Int=10,$orderBy:String,$asc:Boolean
          ) {
          ...HeadlinesList 
        }
      `,
      props.prepared.myQuery,
  );
  //const { countTask:sumofTask,  }=data;

    React.useEffect(() => {
        console.log("PipingUnitEsMain金准 props.prepared变动=" ,props,"history", history);
    }, [signOut, props, history,user]);

    console.log("DeviceMain金准 graphql入口data=" ,data);

  return (
      <AloneContainer>
          <PipingUnitEsListParent eqps={data} filter={props.prepared.filter}/>
      </AloneContainer>
  );
};

